<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover" >
        <div class="user">
          <img :src="userImg"/>
          <div class="userinfo">
            <p class="name">zyt</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>
            上次登录时间：<span>2019-10-10</span>
          </p>
          <p>
            上次登录地点：<span>北京</span>
          </p>
        </div>
      </el-card>
      <el-card shadow="hover" style="height: 522px; margin-top: 20px">
        <el-table :data="tableData">
          <el-table-column show-overflow-tooltip  v-for="(val,key) in tableLabel" :key="key" prop="springboot" :label="val">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card shadow="hover" v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
          <div class="detail">
            <p class="num">${{item.value}}</p>
            <p class="txt">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover">
        <!-- <Echart style="height: 280px" :chartData="echartData.order"></Echart>-->
        <div style="height: 280px" ref="chartColumn">
        </div>
      </el-card>
      <div class="graph">
        <el-card shadow="hover" >
          <div style="height: 280px" ref="saleColumn"/>
        </el-card>
        <el-card shadow="hover" >
          <div style="height: 280px" ref="otherColumn"/>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'home',
    data () {
      return {
        chartColumn: null,
        saleColumn:null,
        otherColumn:null,
        userImg: require("../../assets/image/user.png"),
        countData: [
          {
            name: '本月支付订单',
            value: 1234,
            icon: 'success',
            color: '#2ec7c9'
          },
          {
            name: '本月收藏订单',
            value: 210,
            icon: 'star-on',
            color: '#ffb980'
          },
          {
            name: '本月未支付订单',
            value: 1234,
            icon: 's-goods',
            color: '#5abaef'
          },
          {
            name: '今日支付订单',
            value: 1234,
            icon: 'success',
            color: '#2ec7c9'
          },
          {
            name: '今日收藏订单',
            value: 210,
            icon: 'star-on',
            color: '#ffb980'
          },
          {
            name: '今日未支付订单',
            value: 1234,
            icon: 's-goods',
            color: '#5abaef'
          }
        ],
        tableData: [
          {
            springboot: "123",
          }
        ],
        tableLabel: {
          name: '课程',
          todayBuy: '今日购买',
          monthBuy: '本月购买',
          totalBuy: '总购买'
        },
        echartData: {
          order: {
            title: {
              text: '普通图表'
            },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          sale: {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
            }]
          },
          other:{
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 10,
              data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  {value: 335, name: '直接访问'},
                  {value: 310, name: '邮件营销'},
                  {value: 234, name: '联盟广告'},
                  {value: 135, name: '视频广告'},
                  {value: 1548, name: '搜索引擎'}
                ]
              }
            ]
          }
        },
      }
    },
    methods:{
      initChart() {
        this.chartColumn = echarts.init(this.$refs.chartColumn);
        this.chartColumn.setOption(this.echartData.order);
        this.saleColumn = echarts.init(this.$refs.saleColumn);
        this.saleColumn.setOption(this.echartData.sale);
        this.otherColumn = echarts.init(this.$refs.otherColumn);
        this.otherColumn.setOption(this.echartData.other);
      }
    },
    mounted () {
      /*console.log(echarts.init(this.$refs.chartColumn))*/
      this.initChart()
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/home";
</style>
